<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>联系客服</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
          body{background:#FFF;}
          .service_list{
            background:#F0F5FB;
            padding:0.45rem 0.5rem;
            width:90%;
            margin:0px auto;
            margin-top:0.35rem;
            border-radius:0.06rem;
          }
          .service_list:nth-child(1){
            margin-top:0.25rem;
          }
          .service_list img{
            width:0.8rem;
            height:0.8rem;
            border-radius:50%;
            vertical-align: middle;
          }
          .service_list span{
            color:#2F2F2F;
            font-weight:300;
            font-size:0.29rem;
            padding-left:0.3rem;
            height:0.8rem;
            line-height:0.8rem;
            font-weight:light;
          }
          .service_list b{
            color:#999999;
            font-weight:300;
            font-size:0.27rem;
            height:0.8rem;
            line-height:0.8rem;
            text-align:right;
            padding-left:0.3rem;
            font-weight:light;
          }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="init">
            <div class="loadFull whiteBg">
                <div class="se-loading"></div>
            </div>
        </template>
        <template v-else>
            <div v-if="service.qq" @click="lanchQQ(service.qq.customerQq)" class="service_list disbox">
                <img src="../../../image/service/service_qq.png" />
                <span>QQ客服</span>
                <b class="ell disflex">{{service.qq.customerQq}}</b>
            </div>
            <div v-if="service.wechate" @click="lanchWX(service.wechate.customerWechat)" class="service_list disbox">
                <img src="../../../image/service/service_wechat.png" />
                <span>微信客服</span>
                <b class="ell disflex">{{service.wechate.customerWechat}}</b>
            </div>
            <div v-if="service.mobile" @click="callMobile(service.mobile.customerMobile)" class="service_list disbox">
                <img src="../../../image/service/service_phone.png" />
                <span>电话客服</span>
                <b class="ell disflex">{{service.mobile.customerMobile}}</b>
            </div>
            <div @click="wxSubscribe(service.pubilcwechat.customerPublicWechat)" class="service_list disbox">
                <img src="../../../image/service/service_pubilcwechat.png" />
                <span>微信公众号</span>
            </div>
        </template>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var clipBoard = api.require('clipBoard');
			var photoBrowser = api.require('photoBrowser');
			var iOSDialog = api.require('iOSDialog');

            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    init: true,
                    list: [],
                },
                computed: {
                    service: function(){
                        var temp = {};
                        var list = this.list;
                        for(var i=0; i< list.length; i++){
                            temp[list[i].type] = list[i];
                        }
                        return temp;
                    },
                },
                methods:{
                    fetchServiceList(){
                        var _this = this;
                        $.ajax({
                            url: '/get/help',
                            method: 'get',
                            success: function(res){
                                _this.list = res.data;
                                _this.init = false;
                            }
                        });
                    },
                    lanchQQ(qq){
						var url = 'mqq://im/chat?chat_type=crm&uin='+qq+'&version=1&src_type=web&web_src=qq.com';
						api.openApp({
							uri:url,
							iosUrl:url,
						}, function(ret, err) {
							if (!ret) {
								$.toast('唤起QQ失败，请检查是否安装。');
							}
						});
                    },
                    lanchWX(wx){
                        clipBoard.set({
                            value: wx
                        }, function(ret, err) {
                            if (ret && ret.status) {
                                $.toast('微信号已复制，请进入微信APP添加');
                            }
                        });
                    },
                    callMobile(tel){
                        api.call({
                            type: 'tel_prompt',
                            number: tel
                        });
                    },
                    wxSubscribe(){
						var url = CONFIG.httpConfig.web[CONFIG.env] + '/static/img/service/wechat-white.jpg';
						console.log(CONFIG.httpConfig.web[CONFIG.env] + '/static/img/service/wechat-white.jpg');
						photoBrowser.open({
							images: [url],
							bgColor: '#000'
						}, function(photoRes, err) {
							if (photoRes && photoRes.eventType == "longPress") {
								iOSDialog.actionSheetDialog({title:"微信公众号二维码保存",items:["保存到相册"]},function(buttonRes, err){
								    if(buttonRes.index==1){
								        photoBrowser.close();
										api.showProgress({title: '',text: '',modal: true});
										api.download({
											url:url,
											savePath:'fs://cache/invite.png',
											cache: false,
										}, function(fileRes, err) {
											if(fileRes.state == 2){
												api.hideProgress();
												$.toast("公众号二维码下载失败");
											}else if (fileRes.state == 1) {
												api.hideProgress();
												api.saveMediaToAlbum({
													path:fileRes.savePath
												}, function(saveRes, err) {
													if (saveRes && saveRes.status) {
														$.alert("保存成功");
													} else {
														$.alert("保存失败");
													}
												});
											}
										});
								    }
								});
							}else if(photoRes && photoRes.eventType=="click"){
								photoBrowser.close();
							}
						});
                    }
                },
                mounted(){
					$.initJs(this);
                    this.fetchServiceList();
                }
            });

        }
    </script>
</body>
</html>
